<template>
  <section class="checkout-page user-center-order">
    <div class="row">
      <div class="col-md-12">
        <div class="order-details">
          <div class="order-details__top order-details-header">
            <p>订单编号</p>
            <p>订单总金额</p>
            <p>创建时间</p>
            <p>订单状态 /操作</p>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-12">
        <div class="order-details order-container">
          <div class="order" :key="order.id" v-for="order in ruleForm.orders">
            <p v-if="order.status === status">
              <span>{{ order.orderId }}</span>
              <span>￥{{ order.totalAmount }}元</span>
              <span>{{ order.createTime }}</span>
              <span v-if="status === 0"
                ><small>待支付</small
                ><a
                  class="btn btn-link btn-sm"
                  :href="'/payment?o=' + order.orderId"
                  >立即支付</a
                ><button
                  class="btn btn-link btn-sm"
                  @click="handleOrderStatusChange(order, 1)"
                >
                  取消订单
                </button></span
              >
              <span v-else-if="status === 1"><small>已取消</small></span>
              <span v-else-if="status === 2"><small>待发货</small></span>
              <span v-else-if="status === 3"
                ><small>待收货</small
                ><button
                  class="btn btn-link btn-sm"
                  @click="handleOrderStatusChange(order, 4)"
                >
                  确认收货
                </button></span
              >
              <span v-else-if="status === 4">已完成</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.user-center-order {
  padding-top: 0;
}
.user-center-order li[role="presentation"] {
  width: 100px;
  height: 50px;
  line-height: 50px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  text-align: center;
}
.user-center-order li[role="presentation"] a {
  color: #000;
}
.user-center-order li[role="presentation"] a.active {
  color: #60be74;
  font-weight: 800;
}
.user-center-order .order-details-header {
  display: flex;
}
.user-center-order .order-details-header > p {
  display: block;
  justify-content: center;
  text-align: left;
  width: 25%;
}
.user-center-order .order-container {
  display: block;
}
.user-center-order .order-container > p {
  display: flex;
  justify-content: space-between;
}
.user-center-order .order-container > p > span {
  text-align: left;
  width: 25%;
}
.user-center-order .order-container small {
  font-size: 14px;
  display: inline-block;
  width: 3.5em;
  text-align: center;
}
.user-center-order .order-container > p > span:nth-child(1),
.user-center-order .order-details-header > p:nth-child(1) {
  width: 30%;
}
.user-center-order .order-container > p > span:nth-child(2),
.user-center-order .order-details-header > p:nth-child(2) {
  width: 20%;
}

.user-center-order .order-container .order {
  display: block;
}
.user-center-order .order-container .order > p {
  display: flex;
  justify-content: space-between;
}
.user-center-order .order-container .order > p > span {
  text-align: left;
  width: 25%;
}
.user-center-order .order-container .order small {
  font-size: 14px;
  display: inline-block;
  width: 3.5em;
  text-align: center;
}
.user-center-order .order-container .order > p > span:nth-child(1),
.user-center-order .order-details-header > p:nth-child(1) {
  width: 30%;
}
.user-center-order .order-container .order > p > span:nth-child(2),
.user-center-order .order-details-header > p:nth-child(2) {
  width: 20%;
}
</style>

<script>
import { changeStatus } from "@/api/order";
export default {
  name: "OrderList",
  props: ["ruleForm", "status"],
  data() {
    return {
      order: null,
    };
  },
  methods: {
    handleOrderStatusChange(val, m) {
      this.order = val;
      this.order.status = m;
      changeStatus(this.order).then((res) => {
        console.log(res);
        this.$message("修改完成");
        // 同步更改
        this.$store.dispatch("SaveUserInfo");
      });
    },
  },
};
</script>